<template>
	<view class="com-content">
		<view class="com-box" :style="{'height':height + 'rpx',backgroundColor:bgcolor}">
			<view class="com-top">
				<view class="com-box-l" @tap.stop="itemClick(show)">
					<view class="com-box-l-sel">
						<image class="logo" :src="companyInfo.logo_img"></image>
						<view class="com-box-l-sel-r">
							<view class="name">{{companyInfo.title}}<text class="logo-statu" v-if="obj.statu"></text></view>
							<text class="icons icon-gengduo" :style="{'transform': show?'rotate(90deg)':'rotate(0)'}"></text>
						</view>
					</view>
				</view>
				<view class="com-box-r" v-if="is_r_i">
					<view class="com-box-r-icon">
						<image style="width: 34rpx;height: 34rpx;" :src="$mAssetsPath.icon_search"></image>
					</view>
					<view class="com-box-r-icon">
						<image style="width: 33rpx;height: 33rpx;" :src="$mAssetsPath.icon_add"></image>
					</view>
				</view>
			</view>
			<!--下拉选项列表-->
			<view class="com-dowm"
				:style="{'bottom':'-' + (itemHeight*maxDropdownLength) + 'rpx','height':(itemHeight*maxDropdownLength) + 'rpx',backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="dropdown-item"
						:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':itemTextColor}"
						v-for="(item,index) in itemArr" :key="index" @tap.stop="subItemClick(index)">
						<view class="dropdown-li">
							<image class="logo" :src="item.logo_img"></image>
							<view class="name">{{item.title}}<view class="logo-statu" v-if="item.statu">{{item.num}}</view></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="bg-mask" :class="[show?'bg-mask-show':'']" @tap="maskClose" @touchmove="touchControl"></view>
		<!-- <w-dropdown></w-dropdown> -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import wDropdown from '@/components/w-dropdown/w-dropdown.vue'; //下拉框
	export default {
		name: 'sel-logo',
		components: {
			wDropdown
		},
		props: {
			is_r_i: {
				type: Boolean,
				default: false
			},
			// 是否要滑动关闭
			isTouchPrevent: {
				type: Boolean,
				default: true
			},
			// 下拉单项高度
			itemHeight: {
				type: Number,
				default: 90
			},
			// 能否遮罩关闭
			maskTouch: {
				type: Boolean,
				default: true
			},
			//背景颜色
			bgcolor: {
				type: String,
				default: '#fff'
			},
			// 筛选条高度 （rpx）
			height: {
				type: Number,
				default: 90
			},
			// item数量超过多少开始滚动
			maxItemCount: {
				type: Number,
				default: 5
			},
			//下拉选项数组（二维数组）
			itemArr: {
				type: Array,
				default: () => {
					return [{
						logo_img: "/static/data-img/data-logo1.jpg",
						title: "耐克NIKE",
						statu: false,
						num: 1
					}, {
						logo_img: "/static/data-img/data-logo1.jpg",
						title: "阿迪达斯",
						statu: true,
						num: 2
					}, {
						logo_img: "/static/data-img/data-logo1.jpg",
						title: "乔丹",
						statu: false,
						num: 2
					}]
				}
			},
			obj: {
				type: Object,
				default: () => {
					return {
						logo_img: "",
						title: "",
						statu: false
					}
				}
				
			},
			// 选项左偏移
			itemPadding: {
				type: Number,
				default: 52
			},
			//下拉字号
			itemFontSize: {
				type: Number,
				default: 28
			},
			// 下拉文字颜色
			itemTextColor: {
				type: String,
				default: '#666'
			},
			// 是否需要选择后替换标题
			isNeedChangeTitle: {
				type: Boolean,
				default: true
			},
			currentSubIndex:{
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapGetters(['companyInfo','userInfo']),
			maxDropdownLength() {
				return this.itemArr.length > this.maxItemCount ? this.maxItemCount : this.itemArr.length
			}
		},
		data() {
			return {
				show: false
			}
		},
		methods: {
			itemClick(show) {
				this.show = !show
			},
			maskClose() {
				if (!this.maskTouch) return
				this.show = false
			},
			touchControl() {
				if (this.isTouchPrevent) {
					this.maskClose()
				}
			},
			subItemClick(index) {
				this.$emit('subItemClick', index)
				/* this.$emit('finish', {
					'$index': this.currentIndex,
					...this.itemArr[this.currentSubIndex]
				}) */
				this.show = false
			},

		}
	}
</script>

<style lang="scss">
	.bg-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 98;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask-show {
		visibility: visible;
		opacity: 1;
	}

	.com-content {

		.com-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			display: flex;
			position: relative;
			z-index: 99;
			padding: 10rpx 30rpx;

			.com-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.com-box-l {
					display: flex;
					align-items: center;

					.com-box-l-sel {
						display: flex;
						align-items: center;
						margin-right: 18rpx;

						.logo {
							width: 50rpx;
							height: 50rpx;
							margin-right: 18rpx;
						}
						.com-box-l-sel-r{
							display: flex;
							align-items: center;
							width: 250rpx;
							.name {
								position: relative;
								font-size: 40rpx;
								font-weight: bold;
								line-height: 50rpx;
								padding-right: 10rpx;
								color: $uni-text-color;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								
								.logo-statu {
									position: absolute;
									width: 20rpx;
									height: 20rpx;
									background: #FF5454;
									right: 0;
									top: 0;
									border-radius: 50%;
								}
							}
						}
					}
				}

				.com-box-r {
					display: flex;

					.com-box-r-icon {
						padding: 0 30rpx;
					}

					.com-box-r-icon:last-of-type {
						padding: 0 0 0 30rpx;
					}
				}
			}

		}

		.com-box::after {
			position: absolute;
			content: '';
			width: 100%;
			height: 1rpx;
			left: 0;
			z-index: 99;
		}

		.com-dowm {
			width: 100%;
			position: absolute;
			left: 0;
			z-index: 99;
			overflow: hidden;
			border-top: 1rpx  solid #F2F4F5;

			.dropdown-item {
				width: 100%;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				font-size: 28rpx;
				color: $font-color-9;
				border-bottom: 1rpx solid #F2F4F5;
				.dropdown-li{
					display: flex;
					align-items: center;
					margin-right: 18rpx;
					.logo {
						width: 50rpx;
						height: 50rpx;
						margin-right: 18rpx;
					}
					
					.name {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 400;
						line-height: 44rpx;
						color: $uni-text-color;
					
						.logo-statu {
							margin-left: 20rpx;
							text-align: center;
							width: 16px;
							height: 16px;
							background: #FF5454;
							border-radius: 50%;
							font-size: 11px;
							font-weight: 400;
							line-height: 16px;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>
